<template>
  <div class="zhichu_log">
    <el-dialog title="支出费用设置" :visible.sync="zhichu_log" :close-on-click-modal="false" width="1200px">
      <div style="display: flex; align-items: center;">
        <div style="margin-right: 20px;">选择渠道</div>
        <el-select v-model="all.id" style="margin-right: 20px;" placeholder="请选择渠道" filterable clearable @change="getlist">
          <el-option :label="item.channel_name" :value="item.id" v-for="item in qudaolist" :key="item.id">
          </el-option>
        </el-select>
      </div>
      <div style="margin-top: 20px;">
        <el-table :data="list" border style="width: 100%" >
          <el-table-column prop='source_name' label="订单来源"></el-table-column>
          <el-table-column prop='cost_updated_at' label="更新日期"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="shezhigo(scope.row)">前往设置</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="zhichu_log = false">关闭</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="tit" :visible.sync="shezhi_log" :close-on-click-modal="false" width="1200px">
      <div style="margin-top: 20px;">
        <el-table :data="list2" border style="width: 100%" >
          <el-table-column prop='date' label="日期"></el-table-column>
          <el-table-column label="推广费用">
            <template slot-scope="scope">
              {{scope.row.promote_cost}}
              <i class="el-icon-edit" @click="fix(1,scope.row)" style="cursor: pointer; color:#409EFF;"></i>
            </template>
          </el-table-column>
          <el-table-column label="其他费用">
            <template slot-scope="scope">
              {{scope.row.other_cost}}
              <i class="el-icon-edit" @click="fix(2,scope.row)" style="cursor: pointer; color:#409EFF;"></i>
            </template>
          </el-table-column>
          <!-- <el-table-column label="发货成本">
            <template slot-scope="scope">
              {{scope.row.deliver_cost}}
              <i class="el-icon-edit" @click="fix(3,scope.row)" style="cursor: pointer; color:#409EFF;"></i>
            </template>
          </el-table-column> -->
        </el-table>
        <div style="text-align: right; padding-top:20px;">
          <el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye"
            :page-size="page_size" :total="total"></el-pagination>
        </div>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="shezhi_log = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    name: 'zhichu_log',
    data() {
      return {
        zhichu_log: false,
        qudaolist:"",
        all:{
          id:""
        },
        list:"",

        shezhi_log:false,
        list2:"",
        tit:"",
        dangci_id:"",

        page:1,
        page_size:20,
        total:0
      };
    },
    created() {
      this.qudaolist = JSON.parse(localStorage.getItem('qudaolist'))
      this.getlist()
    },
    mounted() {

    },
    methods: {
      fix:function(val,data){
        let obj = {
          id:data.id,
          promote_cost:data.promote_cost,
          other_cost:data.other_cost,
          deliver_cost:data.deliver_cost
        }

        this.$prompt('请输入费用', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {

          if(val == 1){
            obj.promote_cost = value
          }
          if(val == 2){
            obj.other_cost = value
          }
          if(val == 3){
            obj.deliver_cost = value
          }

          axios.post('/api/form/source/cost',obj)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('设置成功');
              this.getlist()
              this.getlist2()
              this.faguoqu()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
        })

      },
      shezhigo:function(item){
        this.shezhi_log = true
        this.dangci_id = item.id
        this.getlist2()
        this.tit = item.source_name + '订单来源支出设置'
      },
      fanye:function(val){
        this.page = val
        this.getlist2()
      },
      getlist2:function(){
        axios.get(`/api/form/source/costs?id=${this.dangci_id}&page=${this.page}&page_size=${this.page_size}`)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.total = response.data.data.total
            this.list2 = response.data.data.data
            this.list2.forEach(item=>{
              // this.$set(item,'promote_cost_fix',true)
              // this.$set(item,'other_cost_fix',true)
              // this.$set(item,'deliver_cost_fix',true)
              // item.promote_cost_fix = true
              // item.other_cost_fix = true
              // item.deliver_cost_fix = true
            })
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
      },
      getlist:function(){
        axios.get('/api/form/sources?channel_id='+this.all.id)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.list = response.data.data.data
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
      },

      faguoqu: function() {
        this.$emit('zhichulogs', 'gengxinba')

      }

    }
  };
</script>

<style lang="scss" scoped>
  .zhichu_log {
    /deep/ .el-table__body-wrapper {
        margin-top: 0px;
    }
  }
</style>
